<template>
  <div class="wrap">
    <div class="search-area">
      <span class="lable-span"><i class="el-icon-search"/></i> 时间</span>
      <el-date-picker v-model="serchName" @change="research" type="daterange" unlink-panels size="mini"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
        :picker-options="timeOption">
      </el-date-picker>
      <el-button size="mini" class="ml-15" type="primary" @click="research">查询</el-button>
      <el-button size="mini" class="ml-15" @click="research">重置</el-button>
      <el-button size="mini" class="ml-15" type="success" @click="research">新增</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="ListData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="角色名称" width="200" align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.RoleName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="角色描述">
        <template slot-scope="scope">
          <span>{{ scope.row.RoleDescribe }}</span>
        </template>
      </el-table-column>
      <el-table-column label="关联用户数" align="center" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.UserNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注信息">
        <template slot-scope="scope">
          <span>{{ scope.row.Remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序编号" align="center" width="140">
        <template slot-scope="scope">
          <span>{{ scope.row.RoleSort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleGetDetail(scope.row.AuRoleInfoId)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeleted(scope.row.AuRoleInfoId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :pageIndex.sync="listQuery.pageIndex"
    	:pageSize.sync="listQuery.pageSize" @pagination="getListData" />
    
    <!-- 修改新增弹窗 -->
    <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="60%">
      <div slot="title">
        <span class="dialog-title">{{textMap[dialogStatus]}}</span>
      </div>
      <el-form :model="FormData" :rules="rules" ref="FormData" label-width="80px" size="small">
          <el-row :gutter="15">
            <el-col :span="16">
              <el-form-item label="角色名称" prop="RoleName">
                <el-input v-model.trim="FormData.RoleName"></el-input>
              </el-form-item>
              <el-form-item label="角色描述" prop="RoleDescribe">
                <el-input v-model="FormData.RoleDescribe"></el-input>
              </el-form-item>
              <el-form-item label="排序编号" prop="RoleSort">
              <el-input v-model.number="FormData.RoleSort" type="number" oninput="if(value.length>8) value=value.slice(0,8)"></el-input>
            </el-form-item>
              <el-form-item label="备注" prop="Remark">
                <el-input v-model="FormData.Remark"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
             
            </el-col>
          </el-row>
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getRoleList, getDetailById, addRoleData, EditRoleData, deleteRoleData } from '@/api/set-roleInfo.js'

	import Pagination from '@/components/Pagination'
	import PopWindow from '@/components/PopWindow'

export default {
  name: 'roleInfo',
  components: { Pagination, PopWindow },
  data() {
    return {
      listLoading: false,
      total: 0, // 总数
      listQuery: {
        pageIndex: 1, // 当前页码
        pageSize: 15 // 每页数量
      },
      ListData: [],
      dialogFormVisible: false, // 新增修改弹窗显示否
      dialogStatus: '', // 弹窗状态
      textMap: {
        update: '修改功能模块',
        create: '新增功能模块'
      },
			timeOption: {
				disabledDate(time) {
					return time.getTime() > Date.now() - 8.64e6
				}
			},
      FormData: {
        RoleName: '', // 角色名称
        RoleDescribe: '', // 角色描述
        RoleSort: '', // 排序
        Remark: '' // 备注
      },
      rules: {
        RoleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { max: 100, message: '角色名称100个字符内', trigger: 'blur' }
        ],
        RoleDescribe: [
          { max: 100, message: '角色描述100个字符内', trigger: 'blur' }
        ],
        RoleSort: [
          { required: true, message: '请输入排序编号', trigger: 'blur' },
          { type: 'number', max: 999999999, message: '排序编号9位数以内', trigger: 'blur' },
          this.$uwcVa_Positive
        ],
        Remark: [
          { max: 200, message: '备注200个字符内', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleReset () {
      this.listQuery.pageIndex = 1
      //this.getListData();
    },
    resetTemp() {
      this.FormData = {
        RoleName: '', // 角色名称
        RoleDescribe: '', // 角色描述
        RoleSort: '', // 排序
        Remark: '' // 备注
      }
    },
		research() {
			this.showForm = true
		},
		closeForm() {
			this.showForm = false;
		},
		updateHandle() {
			console.log(this.modeValue)
			this.showForm = false;
		},
		addHandle() {
			console.log(this.modeValue)
			this.showForm = false;
		},
		getDetail(){},
    getListData(page) {
      var _self = this;
      _self.listLoading = true;
      getRoleList(_self.listQuery).then((data) => {
        _self.listLoading = false;
        _self.ListData = data.items;
        _self.total = data.total;
      }).catch((err) => {
        _self.listLoading = false;
      })
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['FormData'].clearValidate()
      })
    },
    createData () {
      var _self = this;
      _self.$refs['FormData'].validate((valid) => {
        if (valid) {
          delete _self.FormData.AuRoleInfoId;
          delete _self.FormData.OperUserId;
          delete _self.FormData.CancelFlag;
          delete _self.FormData.SystemFlag;
          addRoleData(_self.FormData).then((data) => {
            _self.$message({
              type: 'success',
              message: '新增成功!'
            });
            // 新增的时候重置搜索条件
            _self.handleReset();

            _self.dialogFormVisible = false;
          }).catch((error) => {
             
          })
        }
      })
    },
    handleGetDetail (id) {
      // 获取详情
      var _self = this;
      _self.resetTemp()
      getDetailById({
        AuRoleInfoId: id
      }).then((data) => {
        _self.FormData = data.items;

        _self.dialogStatus = 'update'
        _self.dialogFormVisible = true
        
        _self.$nextTick(() => {
          _self.$refs['FormData'].clearValidate()
        });
      }).catch((err) => {
         
      })
    },
    updateData () {
      var _self = this;
      _self.$refs['FormData'].validate((valid) => {
        if (valid) {
          delete _self.FormData.OperDate;
          EditRoleData(_self.FormData).then((data) => {
            _self.$message({
              message: '操作成功',
              type: 'success'
            });
            _self.dialogFormVisible = false;
            _self.getListData();
          }).catch((error) => {
            
          })
        } else {
          return false;
        }
      });
    },
    handleDeleted (id) {
      // 删除方法
      var _self = this;
      _self.$confirm('是否删除此条角色数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoleData({ AuRoleInfoId: id }).then((data) => {
          _self.$message({
            type: 'success',
            message: '删除成功!'
          });
          _self.handleReset();
        }).catch((err) => {
          
        })
      })
    }
  },
  mounted() {
    this.getListData();
  }
}
</script>

<style lang="scss" scoped>

</style>
